<template>
  <div>
    <div id="mapEdit" class="chart-map" />
  </div>
</template>

<script>
import { Map, View, Feature, Overlay } from 'ol'
import * as olProj from 'ol/proj'
import { Style, Fill, Stroke, Circle, Icon, Text } from 'ol/style'
import { Point } from 'ol/geom'
import { Tile as TileLayer } from 'ol/layer'
import XYZ from 'ol/source/XYZ'
import { Vector as VectorLayer } from 'ol/layer'
import { Vector as VectorSource } from 'ol/source'
import { siteList } from '@/views/cms/realtime-monitor/map/site'
export default {
  name: 'Index',
  props: {
    'deviceLocation': {
      type: Object,
      required: false
    }
  },
  data() {
    return {
      siteList: siteList,
      // 地图对象
      mapEditObject: null,
      // 地图最大zoom
      maxZoom: 12,
      // 地图最小zoom
      minZoom: 3,
      // 默认zoom
      defaultZoom: 8,
      // 默认中心
      defaultCenter: [114.64, 38.32],
      centerLocation: {
        longitude: null,
        latitude: null
      },
      // 设置中心点的layer
      centerLayer: null,
      // 区站layer
      siteLayer: null,
      activeIcon: null
    }
  },
  watch: {
    'deviceLocation.longitude'() {
      console.log(this.deviceLocation.longitude, this.deviceLocation.latitude)
      this.centerLocation.longitude = this.deviceLocation.longitude
      this.centerLocation.latitude = this.deviceLocation.latitude
      this.setDotMarker()
    },
    'deviceLocation.latitude'() {
      console.log(this.deviceLocation.longitude, this.deviceLocation.latitude)
      this.centerLocation.longitude = this.deviceLocation.longitude
      this.centerLocation.latitude = this.deviceLocation.latitude
      this.setDotMarker()
    }
  },
  mounted() {
    this.initMap()
    this.addSiteMarker()
    this.singleClick()
    if (this.deviceLocation) {
      this.centerLocation.longitude = this.deviceLocation.longitude
      this.centerLocation.latitude = this.deviceLocation.latitude
      this.setDotMarker()
    }
  },
  methods: {
    /**
             * 初始化地图
             */
    initMap() {
      if (!this.mapEditObject) {
        this.mapEditObject = new Map({
          target: 'mapEdit',
          layers: [
            new TileLayer({
              source: new XYZ({
                // 星图瓦片地址
                url: 'https://tiles3.geovisearth.com/base/v1/vec/{z}/{x}/{y}?format=webp&token=e8933b32700e5c2b00f5eb2fa42628842af7a60a2c6142d1d65f1f8ed592ce12'
                // url: 'https://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}'
                // url: process.env.VUE_APP_MAP_DIRECTION
                // url: 'http://10.48.37.32:8080/OneMapServer/rest/services/BaseMap_cache/MapServer/WMTS?service=WMTS&version=1.0.0&request=GetTile&format=image%2Fpng&layer=BaseMap_cache&style=default&tilematrixset=default028mm&tilecol={x}&tilerow={y}&tilematrix={z}&token=null'
              })
            })
          ],
          view: new View({
            // 中心
            center: olProj.fromLonLat(this.defaultCenter),
            // zoom
            zoom: this.defaultZoom,
            // maxZoom
            maxZoom: this.maxZoom,
            // minZoom
            minZoom: this.minZoom,
            // EPSG: 3857 --web地图，基于球体的、web墨卡托投影（伪墨卡托投影Pseudo-Mercator）的投影坐标系，范围为纬度85度以下，由于google地图最先使用而成为事实标准。至今，大多互联网地图都使用EPSG3857，主要是因为该投影是等角投影，适合地图定向及导航，但是纬度越高，面积变形越大。
            // EPSG: 4326 --全球通用，基于WGS84椭球的经纬度坐标系，大地坐标系
            // 投影
            projection: 'EPSG:3857'
          }),
          controls: []
        })
      } else {
        this.mapEditObject.updateSize()
      }
    },

    /**
             * 地图点击时间
             * @param isDot 是否做打点
             */
    singleClick() {
      this.mapEditObject.on('singleclick', (evt) => {
        // 坐标轴转为经纬度
        const coordinate = olProj.transform(evt.coordinate, 'EPSG:3857', 'EPSG:4326')
        // 重新绘制中心点
        this.centerLocation.longitude = coordinate[0]
        this.centerLocation.latitude = coordinate[1]
        this.setDotMarker()
      })
    },

    /**
             * 打点
             */
    setDotMarker() {
      if (this.centerLayer) {
        this.mapEditObject.removeLayer(this.centerLayer)
      }
      const location = olProj.fromLonLat([this.centerLocation.longitude, this.centerLocation.latitude])
      var _featureList = []
      if (this.centerLocation) {
        const _style = new Style({
          image: new Icon({
            scale: 0.2,
            src: require('@/assets/map_icon/pin.png')
          })
        })
        const _feature = new Feature({
          geometry: new Point(location)
        })
        _feature.setId('dot')
        _feature.setStyle(_style)
        _featureList.push(_feature)
        this.centerLayer = new VectorLayer({
          source: new VectorSource({
            features: _featureList
          })
        })
        this.mapEditObject.addLayer(this.centerLayer)
        this.setMapCenter(location)
        this.$emit('locationChange', this.centerLocation)
      }
    },

    /**
             * 设置地图中心
             * @param location 经纬度
             */
    setMapCenter(location) {
      const view = this.mapEditObject.getView()
      view.setZoom(this.maxZoom) // 重新设置地图放大倍数
      view.setCenter(location) // 重新设置中心点的坐标
      this.mapEditObject.render()
    },
    /**
             * 标记区站点
             */
    addSiteMarker() {
      var _featureList = []
      if (this.siteList) {
        this.siteList.forEach(point => {
          const _style = new Style({
            image: new Icon({
              scale: 0.5,
              src: require('@/assets/map_icon/site.png')
            }),
            text: new Text({
              font: 'normal 13px 微软雅黑',
              // 对其方式
              textAlign: 'center',
              // 基准线
              textBaseline: 'middle',
              offsetY: -35,
              offsetX: 0,
              stroke: new Stroke({ color: '#409EFF', width: 10 }),
              // backgroundFill: new Stroke({
              //   color: '#fffff'
              // }),
              // 文本填充样式
              fill: new Fill({
                color: '#ffffff'
              }),
              // padding: [5, 5, 5, 5],
              text: `${point.siteName}`
            })
          })
          const _feature = new Feature({
            geometry: new Point(olProj.fromLonLat([point.longitude, point.latitude]))
          })
          // 用 feature的id来区分区站、设备
          _feature.setId('site-' + point.siteId)
          _feature.setStyle(_style)
          _featureList.push(_feature)
        })
      }
      this.siteLayer = new VectorLayer({
        source: new VectorSource({
          features: _featureList
        })
      })
      this.mapEditObject.addLayer(this.siteLayer)
    }
  }
}
</script>

<style lang="scss" scoped>
  @keyframes ripple-effect {
    0% {
      transform: scale(1);
      opacity:1;
    }
    70% {
      transform: scale(1.2);
      opacity:0.8;
    }
    100% {
      transform: scale(1.6);
      opacity:0.2;
    }
  }
  .chart-map{
    width: 100%;
    height: 100%;
    position: relative;
  }
  .select-box{
    position: absolute;
    left: 15px;
    top: 15px;
    padding: 10px 5px;
    border-radius: 8px;
    background-color: white;
    box-shadow: 0 0 15px rgb(177, 177, 177);
    display: flex;
    flex-direction: row;
    width: 580px;
    justify-content: space-around;
    align-items: center;
    .select{
      width: 180px;
    }
    .checkBox{
      width: 140px;
      display: flex;
      flex-direction: row;
    }
  }
  .map-location{
    background-color: white;
    height: 32px;
    width: 32px;
    padding: 5px;
    position: absolute;
    border-radius: 8px;
    bottom: 15px;
    right: 15px;
    box-shadow: 0 0 15px rgb(177, 177, 177);
    .image{
      width: 22px;
      height: 22px;
    }
  }
  .map-full-screen{
    background-color: white;
    height: 32px;
    width: 32px;
    padding: 5px;
    position: absolute;
    border-radius: 8px;
    top: 15px;
    right: 15px;
    box-shadow: 0 0 15px rgb(177, 177, 177);
    .image{
      width: 22px;
      height: 22px;
    }
  }
  .map-zoom{
    background-color: white;
    width: 32px;
    height: 74px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding: 5px;
    align-items: center;
    position: absolute;
    border-radius: 8px;
    bottom: 60px;
    right: 15px;
    box-shadow: 0 0 15px rgb(177, 177, 177);
    .line{
      width: 100%;
      height: 1px;
      background-color: #409EFF;
    }
    .image{
      width: 14px;
      height: 14px;
    }
  }
  .active-icon{
    width: 35px;
    height: 35px;
    .device-icon-box{
      width: 100%;
      height: 100%;
      position: relative;
      .icon{
        width: 35px;
        height: 35px;
        z-index: 2;
        position: absolute;
      }
      .ripple-icon{
        z-index: 1;
        position: absolute;
        width:100%;
        height:100%;
        border-radius:50%;
        background-color: #13227A; /* 或者你想要的任何颜色 */
        opacity:1;
        animation: ripple-effect 1s ease-out infinite;
      }
    }
    .site-icon-box{
      width: 100%;
      height: 100%;
      position: relative;
      .icon{
        width: 35px;
        height: 35px;
        z-index: 2;
        position: absolute;
      }
      .ripple-icon{
        z-index: 1;
        position: absolute;
        width:100%;
        height:100%;
        border-radius:50%;
        background-color: #409EFF; /* 或者你想要的任何颜色 */
        opacity:1;
        animation: ripple-effect 1s ease-out infinite;
      }
    }
  }
</style>
